<template>
  <div class="health-record">
    <van-nav-bar
      title="健康记录"
      left-text="返回"
      left-arrow
      @click-left="router.back()"
    />

    <!-- 趋势图表 -->
    <trend-chart
      v-if="activeTab === 'weight' && weightData.length"
      :data="weightData"
      title="体重趋势"
      unit="kg"
    />
    <trend-chart
      v-if="activeTab === 'blood-pressure' && bpData.length"
      :data="bpData"
      title="血压趋势"
      unit="mmHg"
    />

<!--    &lt;!&ndash; 记录列表 &ndash;&gt;-->
<!--    <van-tabs v-model:active="activeTab">-->
<!--      <van-tab title="全部" name="all">-->
<!--        <record-list :records="records" @delete="handleDelete" />-->
<!--      </van-tab>-->
<!--      <van-tab title="体重" name="weight">-->
<!--        <record-list :records="weightRecords" @delete="handleDelete" />-->
<!--      </van-tab>-->
<!--      <van-tab title="血压" name="blood-pressure">-->
<!--        <record-list :records="bpRecords" @delete="handleDelete" />-->
<!--      </van-tab>-->
<!--    </van-tabs>-->

    <!-- 导出选项 -->
    <export-options />

<!--    &lt;!&ndash; 添加记录按钮和表单 &ndash;&gt;
    <van-button
      type="primary"
      class="add-btn"
      icon="plus"
      @click="showAddForm = true"
    >
      添加记录
    </van-button>-->

    <van-popup v-model:show="showAddForm" position="bottom" >
      <add-record-form @submit="handleAdd" @cancel="showAddForm = false" />
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showConfirmDialog } from 'vant'
import { getHealthRecords, addHealthRecord, deleteHealthRecord } from '@/api/health'
import { useUserStore } from '@/stores/user'
import RecordList from './components/RecordList.vue'
import AddRecordForm from './components/AddRecordForm.vue'
import TrendChart from './components/TrendChart.vue'
import ExportOptions from './components/ExportOptions.vue'

const router = useRouter()
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const showAddForm = ref(false)
const current = ref(1)
const records = ref([])
const analysis = ref({})
const activeTab = ref('all')


const form = reactive({
  recordType: 1,
  recordValue: '',
  systolic: '',
  diastolic: '',
  remark: ''
})

onMounted(async () => {
  await loadAnalysis()
})

const loadAnalysis = async () => {
  try {
    const { data } = await getHealthAnalysis()
    analysis.value = data
  } catch (error) {
    showToast('获取健康分析失败')
  }
}

const onLoad = async () => {
  try {
    const { data } = await getHealthRecords({
      current: current.value,
      size: 10
    })

    if (refreshing.value) {
      records.value = []
      refreshing.value = false
    }

    records.value.push(...data.records)
    current.value++
    loading.value = false

    if (data.records.length < 10) {
      finished.value = true
    }
  } catch (error) {
    showToast('获取记录失败')
    loading.value = false
  }
}

const onRefresh = () => {
  finished.value = false
  current.value = 1
  loadAnalysis()
  onLoad()
}


const handleDelete = async (id) => {
  try {
    await deleteHealthRecord(id)
    showToast('删除成功')
    onRefresh()
  } catch (error) {
    showToast('删除失败')
  }
}

const handleAdd = async (record) => {
  try {
    await addHealthRecord(record)
    showToast('添加成功')
    showAddForm.value = false
    onRefresh()
  } catch (error) {
    showToast('添加失败')
  }
}

// 添加数据处理
const weightData = computed(() => {
  return weightRecords.value.map(record => ({
    time: record.recordTime,
    value: parseFloat(record.recordValue)
  }))
})

const bpData = computed(() => {
  return bpRecords.value.map(record => {
    const [systolic] = record.recordValue.split('/')
    return {
      time: record.recordTime,
      value: parseInt(systolic)
    }
  })
})
</script>

<style lang="scss" scoped>
.health-record {
  min-height: 100vh;
  background-color: #f7f8fa;

  .add-btn {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 600px;
  }
}
</style>
